<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <meta charset="UTF-8">
        <!--<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>-->
        <title>瀑布流</title>
    </head>
    <style type="text/css">
/*瀑布流*/
/*其中的 column-count 代表分几列，column-gap 代表列和列之间的宽。 column-width 来定义列宽。*/
* {
  padding: 0;
  margin: 0;
}
#main {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 3;
  -moz-column-gap:2px;
  -webkit-column-gap:2px;
  column-gap:2px;
  /*padding: 2px;*/
}
.box {
	height:100%;
	overflow: auto;
  padding: 4px;
  border: solid 2px #eeeeee;
  border-radius: 5px;
  margin:6px  3px;
  cursor: pointer;
  background: #FFF;
		text-align:center;
		/*float:left;*/ 
		max-height:380px;
		overflow:hidden;
		box-shadow:2px 2px 6px #b5b5b5;
		line-height:1.2;
		/*margin:5px 1px;*/
		/*padding:2px;*/
}
.box img {
  width: 100%;
}
/*瀑布流结束*/
    </style>
    <body>
        <div id="main">
            <div class="box">
                <div class="pic">
                    <img src="">
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    <img src="">
                </div>
            </div>
            <!-- 这里省略多个class为box的div-->
            <div class="box">
                <div class="pic">
                    <img src="">
                </div>
            </div>
            
        </div>
    </body>
    <script type="text/javascript">
    	var width = 300, height = 300;
    	for(var i=0;i<30;i++){
    		width = Math.floor(Math.random() * 100) + 300;
            height = Math.floor(Math.random() * 500) + 300;
    		document.getElementById('main').innerHTML+='<div class="box">'+
    		'<div class="pic">'+
                    '<img src="http://placekitten.com/'+ height +'/' + width+'">'+
                '挺好</div>'+
            '</div>';
    	}
//      var width = 300, height = 300;
//      $('.box img').each(function(){
//          // 随机图片的高宽，如果大小一样，就没必要用瀑布流了
//          width = Math.floor(Math.random() * 100) + 300;
//          height = Math.floor(Math.random() * 500) + 300;
//          $(this).attr('src', 'http://placekitten.com/'+ height +'/' + width);
//      });
    </script>
</html>